<template>
  <van-skeleton title :row="5" v-if="!newsInfo" />
  <div class="contentMy" v-else v-html="newsInfo.body"></div>

  <div class="nav-box">
    <van-icon name="arrow-left" @click="router.go(-1)"></van-icon>
    <template v-if="storyInfo">
      <van-icon name="comment-o" :badge="storyInfo.comments"></van-icon>
      <van-icon name="good-job-o" :badge="storyInfo.popularity"></van-icon>
      <van-icon
        name="star-o"
        :color="isStore ? '#1989fa' : ''"
        @click="handleStory"
      ></van-icon>
      <van-icon name="share-o" color="#ccc"></van-icon>
    </template>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, onBeforeUnmount, nextTick, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import api from "../api";
import { Toast } from "vant";

const route = useRoute(),
  router = useRouter(),
  id = route.params.id,
  store = useStore();

/* 关于新闻详细信息 */
let newsInfo = ref(null),
  storyInfo = ref(null);
let link;
const handleStyle = () => {
  let { css, image } = newsInfo.value;
  // 新增样式导入
  if (Array.isArray(css) && css.length > 0) {
    link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = css[0];
    document.head.appendChild(link);
  }

  // 插入大图:保证视图更新后再处理
  nextTick(() => {
    const imgPlaceHolder = document.querySelector(".img-place-holder");
    if (!imgPlaceHolder) return;
    if (!image) {
      imgPlaceHolder.parentNode.style.display = "none";
      return;
    }
    let img = new Image();
    img.src = image;
    img.onload = () => imgPlaceHolder.appendChild(img);
  });
};
// 第一次渲染之前:从服务器获取数据「新闻详情&评论数据」，基于Ajax并行触发
onBeforeMount(async () => {
  let result = await api.queryNewsInfo(id);
  newsInfo.value = result;
  // 处理样式
  handleStyle();
});
onBeforeMount(async () => {
  let result = await api.queryStoryExtra(id);
  storyInfo.value = result;
});
// 组件释放之前:把设置的link移除掉
onBeforeUnmount(() => {
  if (link) document.head.removeChild(link);
});

/* 关于收藏操作的 */
onBeforeMount(async () => {
  try {
    let { info, storyList } = store.state;
    if (!info) {
      await store.dispatch("setInfoAsync");
    }
    if (!storyList) {
      await store.dispatch("setStoryListAsync");
    }
  } catch (_) {}
});
const info = computed(() => store.state.info);
const storyList = computed(() => {
  return store.state.storyList || [];
});
const isStore = computed(() => {
  if (!info.value) return false;
  return storyList.value.some((item) => item.news.id == id);
});
const handleStory = async () => {
  if (!info.value) {
    Toast.fail("您还没有登录~");
    router.replace(`/login?from=${route.path}`);
    return;
  }
  if (isStore.value) {
    // 当前是收藏：取消收藏
    let { id: storyId } =
      storyList.value.find((item) => item.news.id == id) || {};
    let { code } = await api.storeRemove(storyId);
    if (+code !== 0) {
      Toast.fail("操作失败!");
      return;
    }
    Toast.success("操作成功!");
    // 把vuex中的这一条记录也移除
    store.commit("removeStoryList", storyId);
    return;
  }
  // 当前是未收藏：收藏
  let { code } = await api.store(id);
  if (+code !== 0) {
    Toast.fail("收藏失败!");
    return;
  }
  Toast.fail("收藏成功!");
  // 更新vuex中的收藏列表
  try {
    await store.dispatch("setStoryListAsync");
  } catch (_) {}
};
</script>

<style lang="less" scoped>
.contentMy {
  background: #fff;
  padding-bottom: 50px;
  margin: 0;

  :deep(.img-place-holder) {
    height: 375px;
    overflow: hidden;

    img {
      display: block;
      margin: 0;
      width: 100%;
      min-height: 100%;
    }
  }
}

.van-skeleton {
  padding: 30px 15px;
}

.nav-box {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 15px;
  width: 100%;
  height: 50px;
  background: #f4f4f4;
  font-size: 22px;

  .van-icon:nth-child(1) {
    position: relative;

    &::after {
      position: absolute;
      top: -10%;
      right: -15px;
      content: "";
      width: 1px;
      height: 120%;
      background: #d5d5d5;
    }
  }

  :deep(.van-badge) {
    background-color: transparent;
    border: none;
    color: #000;
    right: -5px;
  }
}
</style>